<template>
	<view class="page">
		<view class="top-con flex-row items-center justify-between">
			<view class="">故障充电桩编号</view>
			<input class="input fill" :disabled="disabled" style="text-align: right;" type="text" v-model="form.num" value="" placeholder="请输入" />
		</view>
		<view class="main-con">
			<view class="" @click="show=true">
				<view class="">故障原因</view>
				<view class=" flex-row items-center b-b" style="padding: 10rpx 0;" >
					<input class="input fill" disabled type="text" v-model="form.reason" value="" placeholder="请选择" />
					<u-icon name="arrow-right" size="22"></u-icon>
				</view>
			</view>
			<view class="" style="padding: 50rpx 0;">
				<view class="" style="padding:20rpx 0;">
					问题详细描述
					<text style="font-size: 26rpx;color: #999;">（选填）</text>
				</view>
				<view class="textarea-con">
					<textarea class="textarea" value="" v-model="form.detail" placeholder="请输入问题详细描述" />
					<view class="" style="margin-top: 20rpx;">
						<mix-upload-image ref="mixUploadImage" :length="3" :count="3"></mix-upload-image>
					</view>
				</view>
			</view>
			<view class="btn" hover-class="hover-opacity" @click="submit">提交</view>
			<mix-loading v-if="isLoading"></mix-loading>
			<mix-modal-s ref="mixModal" @onConfirm="back"></mix-modal-s>
		</view>
		
		<u-picker mode="selector" v-model="show" range-key="content" :range="dataList" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				show:false,
				dataList:[],
				disabled:false,
				form:{
					num:"",
					reason:'',
					detail:''
				}
			}
		},
		onLoad(options) {
			if(options.num) this.form.num=options.num,this.disabled=true;
			this.getResonList();
		},
		methods:{
			pickerConfirm(array){
				const index=array[0];
				console.log(index);
				this.form.reason=this.dataList[index].content;
			},
			async getResonList(){
				const res=await this.$request('user/malfunction-reason',{},{showLoading:true});
				if(res.result==0){
					this.dataList=res.dataList;
				}else{
					this.$util.msg(res.resultNote);
				}
			},
			async submit(){
				const {num,reason,detail}=this.form;
				const pic=this.$refs.mixUploadImage.imageList.map(item=>item.url);
				if(num==""){
					this.$util.msg('请填写故障充电桩编号!');
					return
				}
				if(reason==""){
					this.$util.msg('请选择故障原因!');
					return
				}
				const data={
					uid:uni.getStorageSync('uid'),
					pic:pic.join('|'),
					detail,
					reason,
					num
				}
				const res=await this.$request('user/malfunction-report',data,{showLoading:true});
				if(res.result==0){
					this.$refs.mixModal.open();
				}else{
					this.$util.msg(res.resultNote);
				}
			}
		}
		
	}
</script>
<style>
page {
	background: #ffffff;
}
</style>
<style scoped lang="scss">
.top-con {
	height: 113rpx;
	padding: 0 20rpx;
	border-bottom: 13rpx solid #f6f6f6;
}
.main-con {
	padding: 20rpx;
}
.textarea-con {
	border: 1px solid #efefef;
	padding: 20rpx;
}
.textarea {
	height: 160rpx;
	width: 100%;
	font-size: 26rpx;
	font-weight: 500;
	color: #999999;
}
.input {
	height: 70rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #999999;
}
.btn {
	width: 680rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background: $uni-color-bg;
	border-radius: 55rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
	margin: 100rpx auto 0;
}
</style>
